<template>
	
<view>
	
			  <cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
			    <block slot="backText">返回</block>
			    <block slot="content">邀请好友</block>
			  </cu-custom>
	<view v-show="user.vipDJ==0 || user.vipDJ==1" style="display: flex; flex-direction: column; align-items: center; margin-top: 100px;">
	  <image src="../../static/no_team.png" mode="" style="width: 100px; height: 100px;"></image>
	   <text style="margin-top: 10px; font-size: 16px; color: #999;">您还不是会员</text>
	<button class="cu-btn margin-lg bg-gradual-red shadow-blur"  @tap="goPage()">去升级</button> 
	</view> 
	<view  v-show="user.vipDJ==2" >
	  <view class="page">
	    <view class="poster" v-if="!show_poster">
	      <lPainter :board="posterObj" ref="painter"></lPainter>
	      <view class="footer-btn">
	        <view class=""  @click="copy">
	          复制链接
	        </view>
	        <view class="save" @click="toSave">
	          保存二维码
	        </view>
	      </view>
	    </view>
	    <!-- <view class="poster-btn">
	      <view :class="{'is-check':check_idx==index}" v-for="(item,index) in footer_arr" :key="index" @click="toChoose(index)">
	        <image :src="item" mode=""></image>
	        <view v-if="check_idx==index"></view>
	      </view>
	    </view> -->
	    <!-- 生成的图片 -->
	    <uni-popup type="center" ref="posterImg" :maskClick="false">
	      <view class="poster-img">
	        <text @click="closePopup"></text>
	        <image :src="path" mode="" @click="previewImg"></image>
	        <!-- #ifdef H5 -->
	        <view class="">
	          长按图片保存到手机
	        </view>
	        <!-- #endif -->
	        <!-- #ifndef H5 -->
	        <view class="">
	          点击图片保存到手机
	        </view>
	        <!-- #endif -->
	      </view>
	    </uni-popup>
	  </view>
	  </view>
</view>

</template>

<script>
import api from '@/api/api'
import uniPopup from "../../components/uni-popup/uni-popup.vue";
import lPainter from '../../components/lime-painter/index.vue'
export default {
  components: {
    lPainter,
    uniPopup
  },
  data() {
    return {
      user:{},
      userId:'',
      show_poster:false,//显示海报
      path: '', //生成的图片地址
      posterObj: {},
	  }
  },
  onLoad() {

  },
  watch: {
    cur: {
      immediate: true,
      handler() {
        console.log('watch', this.cur)
        this.userId = this.$store.getters.userid
        this.load()
      }
    }
  },
  mounted() {
    this.load()
	
  },
  methods: {
	  goPage(page){
	  this.$Router.push({name: 'uplevel'})
	  },
    load(){
      api.usertongji( this.userId).then(response => {
        if(response.data.code ==200){
          this.user = response.data.result
          let avatar=(response.data.result.avatar && response.data.result.avatar.length > 0)? api.getFileAccessHttpUrl(response.data.result.avatar):'/static/avatar_boy.png'
          this.user.avatar =avatar
		  this.user.url= 'http://'+location.host+'/#/pages/register/register?id='+this.user.userId
		  this.createImg()
        }else{
          let msg = response.data.message || "请求超时"
          this.$tip.alert(msg);
        }
      }).catch(error => {
        this.$tip.alert("请求超时");
        this.isDisabled = true
      })
    },
	createImg(){
		this.posterObj={
		    width: '670rpx',
		    height: '928rpx',
		    background: '#fff',
		    borderRadius: '16rpx',
		    views: [ 
		      {
		        type: 'image',
		        src: api.getFileAccessHttpUrl('bj_1689928972355.png'),
		        css: {
		          left: '32rpx',
		          top: '32rpx',
		          borderRadius: '50%',
		          width: '80rpx',
		          height: '80rpx'
		        }
		      },
		      {
		        type: 'text',
		        text: this.user.name,
		        css: {
		          fontSize: '28rpx',
		          fontWeight: 'bold',
		          color: '#1A2033',
		          lineHeight: '28rpx',
		          left: '136rpx',
		          top: '39rpx'
		        }
		      },
		      {
		        type: 'text',
		        text: '一部手机一个平台 实现微信爆粉99+ 积攒个人人脉',
		        css: {
		          fontSize: '24rpx',
		          color: '#4070FF',
		          lineHeight: '24rpx',
		          left: '136rpx',
		          top: '80rpx'
		        }
		      },
		      {
		        type: 'image',
		        src: api.getFileAccessHttpUrl('bj_1689928972355.png'),
		        css: {
		          left: '32rpx',
		          top: '144rpx',
		          width: '606rpx',
		          height: '750rpx',
		          borderRadius: '16rpx'
		        }
		      },
		      {
		        type: 'text',
		        text: this.user.url,
		        css: {
		          fontSize: '32rpx',
		          color: '#4070FF',
		          fontWeight: 'bold',
		          lineHeight: '45rpx',
		          left: '50rpx',
		          top: '509rpx',
		          width: '550rpx'
		        }
		      },
		      {
		        type: 'qrcode',
		        text: this.user.url,
		        css: {
		          left: '235rpx',
		          top: '631rpx',
		          width: '200rpx',
		          height: '200rpx',
		        }
		      }, 
		    ]
		},  
		this.previewImg()
	},
    copy(){
      // 复制
      uni.setClipboardData({
        data: this.user.url,// 复制的内容
        success: function () {
          console.log('success');
          uni.showToast({
            title:'复制成功',
            duration:2000
          })
        }
      });

    },

    previewImg(){
      // #ifdef H5
      return;
      // #endif
      uni.previewImage({
        current:this.path,
        urls: [this.path]
      });
    },
    closePopup(){
      this.$refs.posterImg.close();
      this.show_poster=false;
    },
    toSave() {
      uni.showLoading({
        title:'海报生成中',
      })
      const painter = this.$refs.painter;
      painter.canvasToTempFilePath().then(res => {
        this.path = res.tempFilePath;
        this.$refs.posterImg.open();
        this.show_poster=true;
        uni.hideLoading()
      });
    },
    getImg(r) {

    },
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
